<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>键盘控制移动</title>
    <script src="js/vue.js"></script>
</head>
<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: blue;
        position: absolute; /* 修改为绝对定位，方便移动 */
        top: 100px; /* 初始位置 */
        left: 100px; /* 初始位置 */
    }
</style>
<body>
    <div id="app">
        <h1 align="center">{{ letter }}</h1>
        <p>使用上下左右箭头键移动蓝色方块</p>
        <div class="box"></div>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    letter: 'A',
                    boxPosition: { x: 100, y: 100 } // 定义方块的初始位置
                };
            },
            methods: {
                pressKey(event) {
                    console.log(event);
                    this.letter = event.key;

                    // 根据按键移动方块
                    const step = 10; // 每次移动的步长
                    switch (event.key) {
                        case 'ArrowUp': // 向上
                            this.boxPosition.y -= step;
                            break;
                        case 'ArrowDown': // 向下
                            this.boxPosition.y += step;
                            break;
                        case 'ArrowLeft': // 向左
                            this.boxPosition.x -= step;
                            break;
                        case 'ArrowRight': // 向右
                            this.boxPosition.x += step;
                            break;
                        case 'Enter': // 回车键
                            alert('登录');
                            break;
                        case ' ': // 空格键
                            alert('按了空格');
                            break;
                    }
                }
            },
            mounted() {
                document.addEventListener('keydown', this.pressKey);
            },
            beforeUnmount() {
                document.removeEventListener('keydown', this.pressKey); // 组件销毁前移除事件监听
            }
        }).mount('#app');
    </script>
</body>
</html>